<template>
  <div style="background-color: rgb(238, 238, 238)">
    <!-- 未来一周气温变化 -->
    <div class="temp_week">
      <!-- 动态切换背景 -->
      <div
        style="
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: center;
        "
      >
        <el-switch
          @click="switchColorMethod"
          v-model="switchColor"
        /><span style="margin-left: 10px; font-weight: bold">深色模式</span>
      </div>

      <div id="assessTemp" style="width: 100%; height: 450px"></div>
    </div>

    <!-- 空气质量指标 -->
    <div class="air">
      <div>
        <!-- 标题 -->
        <div
          style="
            width: 100%;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
          "
        >
          <h2 style="font-family: '华文楷体'; font-weight: bold">
            {{ now.locationName }}空气质量
          </h2>
        </div>

        <!-- 空气质量指标 -->
        <div
          style="width: 850px; display: flex; justify-content: space-between"
        >
          <div style="margin-right: 50px">
            <el-progress
              :stroke-width="13"
              width="160"
              type="circle"
              :percentage="now.aqi"
              color="#626aef"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}</span>
                <span class="percentage-label">{{ now.category }}</span>
              </template>
            </el-progress>
          </div>

          <div style="background-color: #fff; width: 100%">
            <div style="margin-bottom: 50px; margin-top: 40px">
              <el-row :gutter="20">
                <el-col :span="8"
                  ><el-progress
                    striped
                    striped-flow
                    :stroke-width="10"
                    :percentage="now.pm2p5"
                    color="#f56c6c"
                  >
                    {{ now.pm2p5 }}
                  </el-progress>
                  <span style="margin-left: 60px; color: #606266">PM2.5</span>
                </el-col>
                <el-col :span="8"
                  ><el-progress
                    striped
                    striped-flow
                    :stroke-width="10"
                    :percentage="now.pm10"
                    color="#e6a23c"
                  >
                    {{ now.pm10 }}
                  </el-progress>
                  <span style="margin-left: 60px; color: #606266">PM10</span>
                </el-col>
                <el-col :span="8"
                  ><el-progress
                    striped
                    striped-flow
                    :stroke-width="10"
                    :percentage="now.o3"
                    color="#5cb87a"
                  >
                    {{ now.o3 }}
                  </el-progress>
                  <span style="margin-left: 60px; color: #606266">O3</span>
                </el-col>
              </el-row>
            </div>

            <div>
              <el-row :gutter="20">
                <el-col :span="8"
                  ><el-progress
                    striped
                    striped-flow
                    :stroke-width="10"
                    :percentage="now.co"
                    color="#1989fa"
                  >
                    {{ now.co }}
                  </el-progress>
                  <span style="margin-left: 60px; color: #606266">CO</span>
                </el-col>
                <el-col :span="8"
                  ><el-progress
                    striped
                    striped-flow
                    :stroke-width="10"
                    :percentage="now.so2"
                    color="#6f7ad3"
                  >
                    {{ now.so2 }}
                  </el-progress>
                  <span style="margin-left: 60px; color: #606266">SO2</span>
                </el-col>
                <el-col :span="8"
                  ><el-progress
                    striped
                    striped-flow
                    :stroke-width="10"
                    :percentage="now.no2"
                  >
                    {{ now.no2 }}
                  </el-progress>
                  <span style="margin-left: 60px; color: #606266">NO2</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import echarts from "@/echart";
import { queryAssessData, queryAirData } from "@/api/assess/index.js";

const switchColor = ref(false);
const dateTime = ref([]);
const highest = ref([]);
const lowest = ref([]);
const textValue = ref("");
onMounted(() => {
  getWeekDayData();
  getAirData();
  setTimeout(() => {
    initAssessTemp();
  }, 1500);
});

//动态切换背景颜色
function switchColorMethod() {
  initAssessTemp();
}

//获取未来一周内的气温变化数据
const getWeekDayData = () => {
  queryAssessData().then((res) => {
    if (res.code === 200 && res.data !== null) {
      dateTime.value = res.data.dateTime;
      highest.value = res.data.highest;
      lowest.value = res.data.lowest;
      textValue.value = res.data.locationName + "  未来一周气温预估";
    }
  });
};

//获取空气质量指标
const now = ref({});
const getAirData = () => {
  queryAirData().then((res) => {
    if (res.code === 200 && res.data !== null) {
      now.value = res.data;
    }
  });
};

function initAssessTemp() {
  var assessChart = echarts.init(document.getElementById("assessTemp"));
  var option = {
    title: {
      text: textValue.value,
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: "none",
        },
        dataView: { readOnly: false },
        magicType: { type: ["line", "bar"] },
        restore: {},
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: dateTime.value,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} °C",
      },
    },
    series: [
      {
        name: "最高温度",
        type: "line",
        data: highest.value,
        markPoint: {
          data: [
            { type: "max", name: "Max" },
            { type: "min", name: "Min" },
          ],
        },
        markLine: {
          data: [{ type: "average", name: "Avg" }],
        },
      },
      {
        name: "最低温度",
        type: "line",
        data: lowest.value,
        markPoint: {
          data: [{ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 }],
        },
        markLine: {
          data: [
            { type: "average", name: "Avg" },
            [
              {
                symbol: "none",
                x: "90%",
                yAxis: "max",
              },
              {
                symbol: "circle",
                label: {
                  position: "start",
                  formatter: "Max",
                },
                type: "max",
                name: "最高点",
              },
            ],
          ],
        },
      },
    ],
  };
  if (switchColor.value) {
    assessChart.dispose();
    //黑色模式
    assessChart = echarts.init(document.getElementById("assessTemp"), "dark");
    assessChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      assessChart.resize();
    });
  } else {
    assessChart.dispose();
    //黑色模式
    assessChart = echarts.init(document.getElementById("assessTemp"));
    assessChart.setOption(option);
    //随着屏幕大小调节图表
    window.addEventListener("resize", () => {
      assessChart.resize();
    });
  }
}
</script>


<style scoped>
.temp_week {
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
}

.air {
  height: 400px;
  border-radius: 8px;
  background-color: #fff;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 30px;
  color: #000000;
  font-weight: bold;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}
</style>
